
<template >
    <div class="">
      <!-- 输入日期 -->
      <div class="demo-input-suffix ">
        <el-row :gutter="20">
          <div class="top-box" style="margin-left:3%;">鱼类品种搜索</div>
          <!-- 加图片 -->
          <el-button text @click="dialog = true" style="position:absolute;
                          right:7%" title="添加鱼类信息">添加鱼类信息</el-button>
          <el-drawer ref="drawerRef" v-model="dialog" title="上传品种鱼图片" :before-close="handleClose" direction="ltr"
            custom-class="demo-drawer">
            <div class="demo-drawer__content">
              <el-form :model="form">
                <el-form-item label="鱼类名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="鱼类名称" :label-width="formLabelWidth">
                  <el-upload v-model:file-list="fileList" action="/web/fishbaike/uploadDetailFishPic"
                    list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :show-file-list="true" :auto-upload="false">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload>
  
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </el-form-item>
              </el-form>
              <div class="demo-drawer__footer">
                <el-button @click="cancelForm">Cancel</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">{{
                   loading ? 'Submitting ...' : 'Submit' 
                  }}</el-button>
              </div>
            </div>
          </el-drawer>
        </el-row>
      </div>
      <!-- 输入框 -->
      <div class="demo-input-suffix" style="width:90%;margin-left:3%;">
        <el-row :gutter="20">
  
          <div class="top-box"></div>
          <el-input v-model.trim="input2" class="w-50 m-2" placeholder="请输入需要查询的鱼类名称" :prefix-icon="Search"
            style="float:left" />
          <el-button type="primary" plain style="float:left" class="selectbtn">搜索</el-button>
          <!-- 判断身份，隐藏或消失 -->
  
        </el-row>
  
      </div>
  
  
    </div>
<<<<<<< HEAD
    <!-- 大卡片 -->
    <!-- 点击卡片跳转turninTo -->
    <el-row v-for="(info) in list" style="flex-wrap: nowrap;float: left;" class="card">
      <!-- v-for="(o, index) in pageSize"  -->
      <el-col :key="1" :span=8 :offset="1" name="bigCard" style="display: contents;">
        <el-card :body-style="{ padding: '0px' }" style="margin:2%">
          <img src={{info.fishImg}} class="image" />
          <div style="padding: 14px">
            <span>{{  info.id  }}</span>
            <div class="bottom">
              <!-- currenttime是显示时间的 @click="gotolink"-->
              <time class="time">{{  info.introduction  }}</time>
              <el-button text class="button" style="min-width:10%;">详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <!-- page-size是每页显示条数
      pagerCount 总页数
      current-page 当前页数
      size-change 新每页条数
      @current-change="handleCurrentChange" 
      @current-change="getTableData"
      :total=“total” 总共显示的数据 动态获取到data的总条数
    -->
    <el-pagination :page-size=pageSize :pager-count=5 :page-count=pageCount layout="prev, pager, next" :total=6
      @current-change="handleCurrentChange" :current-page=currentPage />
  </template>
  <script setup lang="ts">
  import { ref } from 'vue'
  import { Plus, Search } from '@element-plus/icons-vue'
  import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
  import { ElMessageBox } from 'element-plus'
  // import { ElDrawer, ElMessageBox } from 'element-plus'
  import { ApiGetFishBook, bookBaiKeResData, row, apiFish } from '@/apis/books'
  import { reactive, onMounted } from 'vue'
  const textarea1 = ref('')   //timeBegin
  const textarea2 = ref('')   //timeEnd
  const input1 = ref('')      //author
  const input2 = ref('')      //fishname
  const input3 = ref('')      //introduction
  const currentDate = ref(new Date())//时间
  let size = ref<'' | 'large' | 'small'>('')
  let pageSize = ref(4)
  let pageCount = ref(6)
  let fishPic = ref()
  let flag = ref(true)
  // let id=ref('')
  let currentPage = ref(1)
  const drawer = ref(false)
  // const form.name=ref('')
  const formLabelWidth = '80px'
  // let timer=2000
  
  
  //——————————————————————————————————————————————————————————————————————下面是图片上传
  let diseaseName = ref('')
  
  const uploading = (diseaseName: string,) => {
=======
  </el-drawer>
    </el-row>
  </div>
  <!-- 输入框 -->
  <div class="demo-input-suffix" style="width:90%;margin-left:3%;">
    <el-row :gutter="20">      
      
      <div class="top-box"></div>
      <el-input v-model.trim="input2" class="w-50 m-2" placeholder="请输入需要查询的鱼类名称" :prefix-icon="Search" style="float:left"/>
      <el-button type="primary" plain style="float:left" class="selectbtn">搜索</el-button>
      <!-- 判断身份，隐藏或消失 -->
      
    </el-row>

  </div>


</div>
<!-- 大卡片 -->
<!-- 点击卡片跳转turninTo -->
  <el-row  v-for="(info) in list" style="flex-wrap: nowrap;" class="card">

  <!-- v-for="(o, index) in pageSize"  -->
    <el-col
      :key="1"
      :span=8
      :offset="1"
      name="bigCard"
      style="display: contents;"
      >
      <el-card :body-style="{ padding: '0px' }" style="margin:2%;width: 90%;">
        <img
        style="width:50%;height:50%;margin-left:25%;"
          :src="info.fishImg"
          class="image"
          
        />
        <div style="padding: 14px" >
          <span style="font-size:24px">{{info.fishName}} </span>
          <span style="margin-left:5%;font-size:12px;">id:{{info.id}}</span>
          <div class="bottom btnn">
            <!-- currenttime是显示时间的 @click="gotolink"-->
            <el-button text class="button"   @click="preventBobble(info.fishName,info.introduction),getAllFishImg(info.fishName,imgSrc)" >详情</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 点击详情显示遮罩层 -->
  <el-dialog v-model="dialogTableVisible" :title=title >
    <el-table name="gridData" :data="gridData">
      <!-- 轮播图 -->
      <div class="block text-center">
        <!-- 高度限制盒子 -->
        <el-carousel height="150px">
          <el-carousel-item v-for="item in imgSrc" :key="item">
            <img :src="item" alt="">  
        
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-table>
    <time class="time" >{{introduction}}</time>
  </el-dialog>
  <!-- 分页 -->
  <!-- page-size是每页显示条数
    pagerCount 总页数
    current-page 当前页数
    size-change 新每页条数
    @current-change="handleCurrentChange" 
    @current-change="getTableData"
    :total=“total” 总共显示的数据 动态获取到data的总条数
  -->
  <el-pagination
    :page-size=pageSize
    :pager-count=5
    :page-count=pageCount
    layout="prev, pager, next"
    :total=6
    @current-change="handleCurrentChange"
    :current-page=currentPage
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadFile, UploadProps, UploadUserFile} from 'element-plus'
import {ElDrawer, ElMessageBox } from 'element-plus'
import { Calendar, Search } from '@element-plus/icons-vue'
import { ApiGetFishBook,bookBaiKeResData,row,apiFish,ApiFishImg} from '@/apis/books'
import { reactive, onUnmounted, onUpdated, onMounted, toRefs, } from 'vue'
import Row from 'element-plus/es/components/row/src/row';
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const textarea1 = ref('')   //timeBegin
const textarea2 = ref('')   //timeEnd
const input1 = ref('')      //author
const input2 = ref('')      //fishname
const input3 = ref('')      //introduction
const currentDate = ref(new Date())//时间
let size = ref<'' | 'large' | 'small'>('')
let pageSize=ref(4)
let pageCount=ref(6)
let fishPic=ref()
let flag=ref(true)
// let id=ref('')
let currentPage=ref(1)
const drawer = ref(false)
let title=ref('')
let introduction=ref('')
let imgSrc=ref('')//发get请求拿到所有图片
let list:Array<row>=reactive([])
// const form.name=ref('')
// let timer=2000

//——————————————————————————————————————————————————————————————————————下面是图片上传
let diseaseName=ref('')

const uploading=(diseaseName:string, )=>{

}
function preventBobble(fishName:string,intro:string){
  dialogTableVisible.value = true
  title.value=fishName;
  introduction.value=intro;
}

function getAllFishImg(fishName:string,imgSrc:string){
  ApiFishImg(fishName).then(res=>{
    imgSrc=res.data.data.pic;
    console.log(imgSrc);

  });//拿到所有图片的返回值
  return imgSrc;
  
}

let fileList = ref<UploadUserFile[]>([
>>>>>>> c6a2d85c7aeca257aa6c949d0374fd2afdca4cc3
  
  }
  
  let fileList = ref<UploadUserFile[]>([
  
  ])
  
  
  // 添加append数组的函数
  const addFileList = (fileList: Array<UploadUserFile>, uploadFile: UploadFile) => {
    let url = uploadFile.url;
    let name = uploadFile.name;
    let uploadUserFile: UploadUserFile = {
      "name": name,
      "url": url,
    }
    fileList.push(uploadUserFile);
  }
  
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
  
  }
  
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
  }
  //—————————————————————————————————————————————————————————————— 下面是弹出遮罩层的
  const table = ref(false)
  const dialog = ref(false)
  const loading = ref(false)
  let timer: any
  
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
  
  // const drawerRef = ref<InstanceType<typeof ElDrawer>>()
  const onClick = () => {
    console.log(fileList);
  
    const rawList: any = fileList.value.map(_ => _.raw)//map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 
    const picList = new FormData()  //创建一个表单属性
    for (let i = 0; i < rawList.length; i++) {
      picList.append('pic', rawList[i])
    }
    console.log(picList.get('pic'));
    apiFish(form.name, picList)//发请求
  
    // drawerRef.value!.close()
  }
  
  const handleClose = (done: any) => {
    if (loading.value) {
      return
    }
    ElMessageBox.confirm('Do you want to submit?')
      .then(() => {
        loading.value = true
        timer = setTimeout(() => {
          done()
          // 动画关闭需要一定的时间
          setTimeout(() => {
            loading.value = false
          }, 400)
        }, 2000)
      })
      .catch(() => {
        // catch error
      })
  }
  const cancelForm = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
  }
  
  // ————————————————————————————————————————————————————————分页
  // console.log(bookBaiKeResData);
  //获取当前页数改变当前页
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    //   拿到了当前页数
    runrun(val, pageSize.value)
  
  }
  //getfishbook函数式变量,getFishBook拿到分页之后的返回值
  let getFishBook = async (current: number, size: number) => {
    let res = await ApiGetFishBook(current, size)
    // console.log(res);
  
    let fishBaiKe: bookBaiKeResData = res.data.data
    return fishBaiKe
<<<<<<< HEAD
  }
  let current = 1
  // 将当前页面和条数传进来
  //   pagesize：每页几条
  
  let list: Array<row> = []  //将id赋值给list获取rows数据
  let runrun = async (current: number, pageSize: number) => {
    let getFishBookResponse: bookBaiKeResData = await getFishBook(current, pageSize)//调用一下这个获取分页的函数
=======
}
let current=1
// 将当前页面和条数传进来
//   pagesize：每页几条

// let list:Array<row>=[]  //将id赋值给list获取rows数据
let runrun=async(current:number,pageSize:number)=>{
    let getFishBookResponse:bookBaiKeResData =await getFishBook(current,pageSize)//调用一下这个获取分页的函数
>>>>>>> c6a2d85c7aeca257aa6c949d0374fd2afdca4cc3
    console.log(getFishBookResponse);
    // pageSize=getFishBookResponse.total
    pageCount.value = getFishBookResponse.maxPages //page-count显示的最大页数
    // id[0].value=getFishBookResponse.rows[0].id
    for (let i = 0; i < pageSize; i++) {
      list[i] = getFishBookResponse.rows[i]
    }
<<<<<<< HEAD
    let total = getFishBookResponse.total
=======

    let total=getFishBookResponse.total//获得总数量
>>>>>>> c6a2d85c7aeca257aa6c949d0374fd2afdca4cc3
    console.log(111);
  
    return {
      total,
      pageSize,
      pageCount
    }
  }
  runrun(1, pageSize.value)
  onMounted(() => {
    current
  })
  
  // 选日子
  const shortcuts = [
    {
      text: 'Today',
      value: new Date(),
    },
    {
      text: 'Yesterday',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24)
        return date
      },
    },
<<<<<<< HEAD
    {
      text: 'A week ago',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
        return date
      },
    },
  ]
  
  
  </script>
  <style scoped lang="scss">
  .time {
    font-size: 12px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .button {
    padding: 0;
    min-height: auto;
  }
  
  .image {
    width: 100%;
    display: block;
  }
  
  .top-box {
=======
  },
]
// ————————————————————————————————————————————————————————————————————这下面是点击详情遮罩层

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]

</script>
<style scoped lang="scss">

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 17px;
  font-size:18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.top-box{
>>>>>>> c6a2d85c7aeca257aa6c949d0374fd2afdca4cc3
    margin: 5px;
  }
  
  #bigCard {
    width: 25%;
  
  }
  
  .selectbtn {
    position: absolute;
    right: 0%;
    top: 24%;
  }
  
  #add {
    float: none;
  
<<<<<<< HEAD
  
  }
  </style>
=======
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.btm{
  position: relative;
}
.btnn{
  min-width:10%;
  position: absolute;
  right:5%;
  bottom: 7%;
  display: inline-block;
}
</style>
>>>>>>> c6a2d85c7aeca257aa6c949d0374fd2afdca4cc3
